import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import { Layout, Menu } from 'antd'
import {  } from '@ant-design/icons'


import logo from './logo.png'
import './index.less'

const { Header, Content, Sider } = Layout


@withRouter
class Frame extends Component {
    onMenuClick = ({ key }) => {
        this.props.history.push(key)
    }

    render() {

        return (
            <Layout style={{height: '100%'}}>
                <Header className="header max-header" style={{backgroundColor: '#fff'}}>
                    <div className="max-logo">
                        <img src={logo} alt="ADMIN" />
                    </div>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background left-sider">
                        <Menu
                            mode="inline"
                            selectedKeys={[this.props.location.pathname]}
                            onClick={this.onMenuClick}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            {
                                this.props.menus.map(item => {
                                    return (
                                        <Menu.Item key={item.pathname}>
                                            {item.title}
                                        </Menu.Item>
                                    )
                                })
                            }
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '16px' }}>
                        <Content
                            className="site-layout-background content"
                            style={{
                                margin: 0,
                                backgroundColor: '#fff'
                            }}
                        >
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}


export default Frame